<template>
    <component
      :width="size"
      :height="size"
      :viewBox="viewBox"
      :class="className"
      v-bind="$attrs"
      :is="componentName" />
</template>

<script setup>
import MprLayoutIcon from './mprLayout.svg?component'
import MprLayoutIcon1 from './mprLayout1.svg?component'
import MprLayoutIcon2 from './mprLayout2.svg?component'
import MprLayoutIcon3 from './mprLayout3.svg?component'
import MprLayoutIcon4 from './mprLayout4.svg?component'
import QuickLayoutIcon from './quickLayout.svg?component'
import QuickLayoutIcon1 from './quickLayout1.svg?component'
import QuickLayoutIcon2 from './quickLayout2.svg?component'
import QuickLayoutIcon3 from './quickLayout3.svg?component'
import QuickLayoutIconMulti from './quickLayoutMulti.svg?component'
import CubeIcon from '@resource/asset/mpr.svg?component'
import MprIcon from '@renderer/assets/icon/mprIcon.svg?component'
import HorFlip from '@renderer/assets/icon/horFlip.svg?component'
import VerFlip from '@renderer/assets/icon/verFlip.svg?component'
import Rotate90 from '@renderer/assets/icon/rotate90.svg?component'
import CounterClockRotate90 from '@renderer/assets/icon/counterClockwise90.svg?component'
import MipIcon from '@renderer/assets/icon/mipIcon.svg?component'
import { computed } from "vue";
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: [String, Number],
    default: 24
  },
  viewBox: {
    type: String,
    default: '0 0 24 24'
  },
  color: {
    type: String,
    default: '#000000'
  },
  className: String
})

const map = {
  'quickLayoutIcon': QuickLayoutIcon,
  'quickLayoutIcon1': QuickLayoutIcon1,
  'quickLayoutIcon2': QuickLayoutIcon2,
  'quickLayoutIcon3': QuickLayoutIcon3,
  'quickLayoutIconMulti': QuickLayoutIconMulti,

  'mprLayoutIcon': MprLayoutIcon,
  'mprLayoutIcon1': MprLayoutIcon1,
  'mprLayoutIcon2': MprLayoutIcon2,
  'mprLayoutIcon3': MprLayoutIcon3,
  'mprLayoutIcon4': MprLayoutIcon4,
  'cubeIcon': CubeIcon,
  'mprIcon':MprIcon,
  'horFlip':HorFlip,
  'verFlip':VerFlip,
  'rotate90':Rotate90,
  'counterClockRotate90':CounterClockRotate90,
  'mipIcon': MipIcon,
}
const componentName = computed(() => {
    return map[props.name]
})

</script>
